<template>
  <el-dialog v-model="dialogVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" title="设置工作区路径" width="600px" center align-center destroy-on-close>
    <div class="set-work-path">
      <div class="set-work-path-content">
        <span>工作区路径</span>
        <el-input v-model="workPath" placeholder="请确认工作区文件夹路径" />
        <el-button type="primary" @click="onConfirm">{{ workPath ? "确认" : "选择" }}</el-button>
      </div>
      <p class="set-work-path-des">说明：该路径作为本软件数据的基础路径，后续创建的所有书籍信息，都在此路径中。</p>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
/**
 * 设置工作区路径
 */
import { ref } from "vue";
import { useGlobalStore } from "@/store/modules/globalStore";
import { useVModel } from "@vueuse/core";

const globalStore = useGlobalStore();

interface Props {
  visible: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false
});

const emit = defineEmits(["update:visible"]);

const dialogVisible = useVModel(props, 'visible', emit)

const workPath = ref(globalStore.workPath);

// 没有值时，执行选择文件夹操作，有值时，执行确认操作
async function onConfirm() {
  if (!workPath.value) {
    const filePath = await window.electronAPI.openFile();
    if (filePath) {
      workPath.value = filePath;
    }
  } else {
    // 设置工作区目录
    window.electronAPI.setStore("workPath", workPath.value);
    globalStore.setWorkPath(workPath.value);
  }
}
</script>

<style lang="scss" scoped>
.set-work-path {
  text-align: center;
  &-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-des {
    font-size: 13px;
    margin-top: 15px;
  }
  .el-input {
    width: 350px;
    margin: 0px 15px;
  }
  .el-button {
    width: 80px;
  }
}
</style>
